<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title><%= title %></title>
    <% include ../partial/meta %>
    <link rel="stylesheet" href="/app/static/weixin/css/pure-min.css">
    <link rel="stylesheet" href="/app/static/weixin/css/weixin.css">
    <style>
    	body {
    		background: #F0F0F0;
    	}
    </style>
</head>
<body>
<div class="main-register">
	<header class="header">
		<a href="javascript:history.go(-1)" class="back"><img src="/app/static/weixin/img/back.png" alt="back" ></a>
		<p>登入注册</p>
	</header>
	<div class="logo-item">
		<img src="/app/static/weixin/img/old-logo.png" alt="logo">
		<p>房妈妈<br>您身边的租房管家</p>
	</div>
	<form action="/user/token/auth" method="post">
        <div class="ui-login">
            <ul class="ui-row">
                <li class="ui-col ui-subrow">
                    <label><img src="/app/static/weixin/img/iPhone.png" alt="手机"></label>
                </li>
                <li class="ui-col ui-col-80">
                    <input type="tel" class="intxt" id="mobile" name="mobile" maxlength="11" placeholder="你的手机号码" autocomplete="off">
                </li>
            </ul>

            <ul class="ui-row" style="position:relative">
                <li class="ui-col ui-subrow">
                    <label><img src="/app/static/weixin/img/code.png" alt="短信"></label>
                </li>
                <li class="ui-col ui-col-80">
                    <input type="tel" class="intxt" id="code" name="vcode" maxlength="4" placeholder="短信验证码" autocomplete="off">
                </li>
                <button class="ui-vcode" onclick="retrive(this)">获取验证码</button>
            </ul>
            <div class="ui-submit">
                <input type="submit" value="登录">
            </div>
            <p class="ui-server">
                客服热线: <a href="tel:0592-5931113">0592-5931113</a>
            </p>
        </div>
    </form>
</div>
<script src="/app/static/weixin/js/zepto.min.js"></script>
<script>
	$(function() {
	    // 策略(过于耦合)
	    var strategies = {
	        isMobile: function(value, errMsg) {
	            if ( !/(^1[3|4|5|8][0-9]{9}$)/.test( value ) ){
	                return errMsg;
	            } 
	        },
	        isCode: function(value, errMsg) {
	            if(!/^[0-9]{4}$/.test(value)){
	                return errMsg;
	            }
	        }
	    }
	    // 验证
	    var Validator = function() {
	        this.cache = [];
	    }

	    var proto = Validator.prototype;
	    proto.add = function(dom, rule, errMsg) {
	        var arr = rule.split(':');
	        this.cache.push(function(){
	            var strategy = arr.shift()
	            arr.unshift($(dom).val())
	            arr.push(errMsg)
	            return strategies[strategy].apply(dom, arr);
	        })
	    }
	    proto.start = function(dom, rule, errMsg) {
	        for(var i =0, fn; fn = this.cache[i]; i++){
	            var msg = fn();
	            if(msg) {
	                return msg
	            }
	        }
	    }

	    // 验证规则
	    var loginValidator = function() {
	        var validator = new Validator();
	        validator.add('#mobile', "isMobile", "请填写正确的手机号")
	        validator.add('#code', "isCode", "请填写正确的验证码")
	        var err = validator.start()
	        return err
	    }
	    // 错误处理
	    var errorHandle = function(errMsg) {
	        alert(errMsg);
	    }
	    // 提交逻辑
	    var registerForm = $('form')
	    registerForm.submit(function(event) {
	        var errMsg = loginValidator();
	        if(errMsg) {
	            errorHandle(errMsg)
	            return false;
	        }
	    })
	    // 验证码处理
	    var handleCode = function(remainder, time, that) {
	        if (remainder.sec <= 0) {
	            clearInterval(time)
	            that.text('获取验证码')
	            that.removeClass('gray')
	            $('.ui-vcode').removeAttr("disabled");
	        } else {
	            remainder.sec--
	            that.text(remainder.sec + '秒后刷新');
	        }
	    }
	    // 获取验证码
	    var retriveCode = function() {
	    	console.log(22)
	        var errMsg = loginValidator()
	        var whether = true;
	        if(errMsg == "请填写正确的手机号") {
	            return !whether
	        }
	        var url = "/user/token/code?mobile=" + $("#mobile").val()
	        $.get(url, function(data) {
	        	console.log(typeof data, data);
	            if (data == -1) {
	                errorHandle("您点击'发送验证码'的速度太快了，请稍候再尝试！");
	                !whether
	            } else if (data == 0) {
	                errorHandle("请输入您的手机号码！")
	                $("#mobile").focus();
	                !whether
	            } else if (data == -2){
	            	errorHandle("请稍后重试！")
	            }
	        	
	        })
	        return whether
	    }
	    
	    // 获取
	    window.retrive = function(target) {

	        var that = $(target);
	    	that.addClass('gray');
	        that.attr('disabled',true);
	        if(!retriveCode()) {
	            return
	        }
	        var remainder = {sec: 60}
	        that.text(remainder.sec + '秒后刷新');
	        var time = setInterval(function(){handleCode(remainder, time, that)}, 1000)  
	    }
	});
</script>
</body>
<% include ../partial/analyse %>
</html>
